<template>
  <div class="performance-center">
    <p class="level">(单位：元)</p>
    <p class="level2"  @click="clickItem('新增回款统计')">回款合计：{{ checkNumAll.toLocaleString() }}</p>
    <div id="rightBottom" @mouseenter="mouseHandle" @mouseleave="mouseLeaveHandle"></div>
     <pops ref="pop"></pops>
     <pop1 ref="pop1" @confirm="getShowDetail"></pop1>
  </div>
</template>

<script>
import bg101 from '../assets/bg1_01.png'
import bg102 from '../assets/bg1_02.png'
import pops from '@/views/components/pop/pops'
import pop1 from '@/views/components/pop/pop1'
import {getMonHK, getPersonHK, saleGetAll} from '@/api/home'
export default {
  data() {
    return {
      rightBottom: null, //昨天产量
      timer: null, //循环定时器
      outTimer: null, //延迟定时
      index: 0, //索引
      allList: [], //所有的team内容
      list: [],
      stopScroll: true, // 轮播起止控制
      checkNumAll: 0,
      option: {
        textStyle: {
          color: '#d7dadf',
          fontSize: 12
        },
        legend: {
          show: false,
          top: 5,
          right: 5,
          itemWidth: 8,
          itemHeight: 8,
          icon: 'rect',
          padding: 0,
          textStyle: {
            color: 'rgb(217,219,222)',
            fontSize: 12,
            padding: [0, 0, 0, 0]
          },
          data: [
            {
              name: '回款金额'
            }
          ]
        },
        color: ['rgba(0, 133, 255, 1)'],
        grid: {
          containLabel: true,
          left: 10,
          right: 0,
          bottom: 10,
          top: 30
        },
        xAxis: {
          nameTextStyle: {
            color: '#c0c3cd',
            padding: [0, 0, -10, 0],
            fontSize: 12
          },
          axisLabel: {
            color: 'rgba(184, 204, 255, 1)',
            fontSize: 12,
            interval: 0,
            rotate: 0
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: '#384267',
              width: 1
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#063073',
              type: 'dashed'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(0, 133, 255, 0.2)'
            },
            show: true
          },
          data: [],
          type: 'category'
        },
        yAxis: {
          splitNumber: 5,
          axisLabel: {
            color: '#295296',
            fontSize: 12,
            interval: 0
          },
          axisTick: {
            lineStyle: {
              color: '#668092',
              width: 0
            },
            show: true
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#063073',
              type: 'dashed'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(0, 133, 255, 0.2)',
              width: 1
            },
            show: false
          }
        },
        // 调整柱子间距
        series: [
          {
            name: '新增回款',
            type: 'pictorialBar',
            symbol: 'image://' + bg102,
            symbolSize: [22, '100%'],
            data: [],
            barWidth: 42,
            symbolOffset: [0, 0],
            legend: {
              show: false
            }
          },
          {
            name: '新增回款', // 顶部
            type: 'pictorialBar',
            symbolPosition: 'end',
            symbol: 'image://' + bg101,
            symbolSize: [22, 4],
            symbolOffset: [0, -2],
            data: [], // 设置顶部位置
            barWidth: 42,
            tooltip: {
              show: false,
              trigger: 'axis'
            }
          }
        ],
        tooltip: {
          show: true,
          trigger: 'axis'
        }
      },
    };
  },
  async mounted() {
    await this.getDataList()
    this.initYesterChart();
  },
  components:{
    pops,
    pop1,
  },
  beforeDestroy() {
    clearInterval(this.timer);
    clearTimeout(this.outTimer);
  },
  methods: {
    clickItem(item) {
      let obj = {
        name: '所有员工',
        mon: '截至本月',
      }
      this.$refs.pop1.getShow(obj,item)
    },
    getShowDetail() {
      console.log(111)
    },
    async getDataList(){
      await getMonHK().then(res=>{
        if(res.code === 200){
          this.allList = res.data.sort((a, b) => a.mon - b.mon);
          this.allList.forEach(item=>{
            item.mon = item.mon+'月'
          })
          res.data.forEach(item=>{
            this.checkNumAll += item.itemAmount
          })
        }else{
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      }).catch(err=>{
        console.log(err)
      })
    },
    initYesterChart() {
      this.$nextTick(() => {
        clearInterval(this.timer);
        clearTimeout(this.outTimer);
        if (!this.rightBottom) {
          this.rightBottom = this.$echarts.init(
              document.getElementById("rightBottom")
          );
        }
        this.rightBottom.on('click',async (params)=> {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          let obj = {
            name: '',
            seriesName: `${params.name}回款统计`,
            arr:[]
          }
          await getPersonHK({mon:params.name.slice(0,1)*1}).then(res=>{
            if(res.code === 200){
              obj.arr = res.data
              loading.close();
            }
          })
          this.$refs.pop.getShow(obj)
        });
        this.tabChangeData();
        // 置换数据
        this.$nextTick(() => {
          this.rightBottom.setOption(this.option);
        });
        this.timer = setInterval(() => {
          if (this.list.length < 5) {
            //截取的数组长度小于5时取消轮播
            this.stopScroll = false;
            clearInterval(this.timer);
            this.list = this.allList.slice(-5); //截取最后5条
            this.outTimer = setTimeout(() => {
              this.index = 0; //索引从新置为0
              this.stopScroll = true;
            }, 5000);
          } else {
            if (this.list[this.list.length - 1] === this.allList[this.allList.length - 1]) {
              this.index = 0;
            }
          }
          this.tabChangeData();
          // 置换数据
          this.$nextTick(() => {
            this.rightBottom.setOption(this.option);
          });
        }, 5000);
      });
    },
    tabChangeData() {
      if (this.stopScroll === true) {
        if (this.allList.length > 5) {
          this.list = this.allList.slice(this.index, 5 + this.index); //截取5条
          this.index++;
        } else {
          this.list = this.allList.slice(0, 5);
        }
      }
      this.option.xAxis.data = this.list.map(obj => obj.mon)
      this.option.series[0].data = this.list.map(obj => obj.itemAmount)
      this.option.series[1].data = this.list.map(obj => obj.itemAmount)
    },
    mouseHandle() {
      this.stopScroll = false;
    },
    mouseLeaveHandle() {
      this.stopScroll = true;
    }
  },
};
</script>
<style lang="scss" scoped>
.performance-center {
  position: relative;
  width: 100%;
  height: 100%;
  .level{
    color: rgba(184, 204, 255, 1);
    position: absolute;
    top:0;
    left: 10px;
    font-size: 14px;
  }
  .level2{
    margin-left: 100px;
    font-size: 16px;
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    z-index: 1;
  }
  #rightBottom {
    width: 100%;
    height: 100%;
  }
}
</style>
